import $ from "jquery";

function lyVerify(Vue) {
    Vue.directive('ly-verify', {
        inserted: function (el, binding, vnode) {
            //获取全局的vuex、store
            const store = vnode.context.$store;
            const route = vnode.context.$route;
            const fullPath = route.fullPath;

            // 获取v-model绑定的值
            const modelValue = vnode.componentInstance.value;

            // 给DOM元素添加ID
            const _uid = 'ly' + store.state.uid++;
            el.setAttribute('ly-id', _uid);
            // console.log('_uid', _uid)

            //将元素的id、值、校验规则加入到vuex
            let valueObj = {
                value: modelValue,
                type: [...(binding.value)]
            }
                //为当前路径创建一个单独空间
            if(store.state.verifyValue[fullPath] == undefined) store.state.verifyValue[fullPath] = {}
            store.state.verifyValue[fullPath][_uid] = valueObj

            // 打印v-model绑定的值
            // console.log('inserted: ', modelValue);
        },
        update: function (el, binding, vnode, oldVnode) {
            //获取全局的vuex、store
            const store = vnode.context.$store;
            const route = vnode.context.$route;
            const fullPath = route.fullPath;

            // 获取v-model绑定的值
            const modelValue = vnode.componentInstance.value;

            // 获取旧DOM元素的ID名称
            const oldId = oldVnode.elm.getAttribute('ly-id');

            // 将新的DOM元素的ID名称设置为旧的ID名称
            el.setAttribute('ly-id', oldId);

            // 对vuex绑定、更新dom中v-model的值
            store.state.verifyValue[fullPath][oldId].value = modelValue
            // console.log('updated: ', modelValue);
        },
        unbind:function (el, binding, vnode,oldVnode) {
            // 获取旧DOM元素的ID名称
            const oldId = el.getAttribute('ly-id');

            //
        }
    });
}

const LyDirective = {}
LyDirective.install = Vue => {
    lyVerify(Vue);
    Vue.directive('up_verify', {
        bind: function (el, binding, vnode) {
            ``
            //do something
        },
        inserted: function (el, binding, vnode) {
            let route = vnode.context.$route
            let store = vnode.context.$store
            // console.log('inserted',el,binding,vnode)
            // console.log('inserted',el.offset)
            // console.log('inserted',el.offset())
            //do something
            // console.log('vnode.data' + vnode.data + '---', vnode.data)

            // console.log('vnode.model-' + vnode.data.model + '---', vnode.data.model)
            // console.log('vnode.value-' + vnode.data.model.value + '---', vnode.data.model.value)


            // console.log('this.$route.fullPath',route.fullPath);

            // console.log('el',el.value)
            // console.log('vnode', vnode)
            // console.log('vnodevalue', vnode.data.model.value)
            // console.log('uid',uid)
            let verifyFun = {
                'int': (value, warn) => {
                    if (value > 0 && value.trim().length > 0) return false
                    // console.log('elintintintintint-' + value + '---')
                    return '请填写正整数'
                }
            }

            // console.log('binding.value', binding.value)

            let fun = (warn) => {
                // console.log('binding.value', binding.value)
                return binding.value.every(item => {
                    // console.log('vnode.data.model-' + vnode + '---', vnode)
                    // console.log('vnode.data.model-' + vnode.data.model + '---', vnode.data.model)
                    // console.log('vnode.data.model.value-' + vnode.data.model.value + '---')
                    return verifyFun[item](vnode.data.model.value, warn);
                })
            }
            let uid = 'uid' + vnode.componentInstance._uid.toString()
            // el.id = el.id + ' ' + uid
            el.id = uid
            vnode.context.$store.commit('verify', [route.fullPath, fun, uid])
            // vnode.context.$store.commit('verify',[route.fullPath,])
            // el.id = "uid1"
            // let str = "#uid"+uid
            // console.log(document.getElementById(str));
            vnode.context.$nextTick(() => {
                // console.log('vnode.offset().top',el)
                // console.log($("#uid"+uid))
            })
        },
        componentUpdated: function (el, binding, vnode) {
            let uid = vnode.componentInstance._uid.toString()
            // let str = "#uid"+uid
            let str = "#uid1"
            // console.log(document.getElementById(str));
            // console.log('vnode.offset().top',el)
            // console.log('vnvnodep',vnode)
            // __vue__
            // el.id = el + ' ' + vnode.componentInstance._uid
            // $('div').attr('id','id_new');
            // console.log('vnode.offset().top',vnode.offset)
            // console.log('vnode.offset().top',vnode.offset().top)
            function rollIndex() {
                $("html, body").animate({
                    scrollTop: $("#div1").offset().top
                }, {duration: 500, easing: "swing"});
            }

            // document.getElementById('')
        }
    })
}
export default LyDirective

